<template>
  <el-dialog @open="callBackOpen" @close="callBackClose" v-model="dialogFormVisible" title="部门任务分配" style="float: left" :show-close="false" :close-on-press-escape="false" :close-on-click-modal="false">
    <h2 style="float: left">部门名字：{{information.department.name}}</h2>
    <h2 >项目名称：{{this.currentProject.name}}</h2>
    <!--              form   -->
    <el-form :model="task" label-position="left" :rules="rules" ref="taskForm">
      <el-form-item label="任务名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="task.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="任务详情" :label-width="formLabelWidth"  prop="details">
        <el-input type="textarea" v-model="task.details" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="成员"  :label-width="formLabelWidth"  prop="companyUserId">
        <el-select size="medium" v-model="task.companyUserId" placeholder="请选择一名部门成员">
          <el-option
              v-for="item in memberList"
              :key="item.userinfo.id"
              :label="item.userinfo.name"
              :value="item.userinfo.id">
            <span style="float: left">{{ item.userinfo.name }}</span>
            <span style="float: right;color: var(--el-text-color-secondary);
                        font-size: 13px; ">{{ item.userinfo.nickname }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间"  :label-width="formLabelWidth" prop="startTime">
        <div class="demo-datetime-picker">
          <div class="block">
            <el-date-picker
                v-model="task.startTime"
                type="datetime"
                placeholder="Pick a Date"
                format="YYYY/MM/DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
            />
          </div>
        </div>
      </el-form-item>
      <el-form-item label="预计结束时间"  :label-width="formLabelWidth" prop="estTime">
        <div class="demo-datetime-picker">
          <div class="block">
            <el-date-picker
                v-model="task.estTime"
                type="datetime"
                placeholder="Pick a Date"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
            />
          </div>
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false" type="warning">取消</el-button>
                <!--                分配完成，列表中删除这条-->
                 <el-button type="success" @click="dialogFormVisible = false" v-show="finishButton==false">分配完成</el-button>
                <el-button type="primary" @click="keepSaveTask('taskForm')"
                >添加(清空列表，继续分配)</el-button
                >
              </span>

    </template>
  </el-dialog>

</template>

<script>
import instanceToken from "@/utlis/tokenIdentify";
export default {
  name: "AssignTask",
  props:["currentProject","information","nowHandleProjectId","memberList","dialogFormVisible"],

  data(){
    return{
      rules: {
        name: [
          { required: true, message: '请输入任务名字', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        details: [
          { required: true, message: '请输入任务细节', trigger: 'blur' }
        ],
        companyUserId: [
          {  required: true, message: '选择接收人', trigger: 'change' }
        ],
        startTime: [
          { type: 'date', required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        estTime: [
          { type: 'date', required: true, message: '请选择结束时间', trigger: 'change' }
        ],

      },

      task: {
        name: '',
        details: '',
        companyId:'',
        projectId:'',
        departmentId:'',
        pubId:'',
        companyUserId:'',
        subTime:'',
        startTime:'',
        estTime:'',
      },
      formLabelWidth: '120px',
      finishButton:true,

    }
  },
  methods:{
    callBackOpen(){
      console.log("open回调");
      this.task.companyId=this.currentProject.companyId ;
      this.task.departmentId = this.currentProject.departmentId;
      this.task.projectId = this.currentProject.id;
      this.task.pubId = this.information.id;
      console.log("task")
      console.log(this.task)
    },
    callBackClose(){
      Object.keys(this.task).forEach(key => (this.task[key] = ''));
      this.$refs["taskForm"].resetFields();
      console.log("close回调")
    },
    keepSaveTask(taskForm) {
      console.log(this.task.startTime);
      console.log(this.task.estTime);
      console.log("--------------");
      this.task.departmentId = this.information.departmentId;
      this.$refs[taskForm].validate((valid) => {
        if (valid) {
          instanceToken.post('project/minister/assignTask', this.task).then(res => {
            if (res.data.message = 'AllDone') {
              this.finishButton = false;
              Object.keys(this.task).forEach(key => (this.task[key] = ''));
              this.task.companyId = this.currentProject.companyId;
              this.task.departmentId = this.currentProject.departmentId;
              this.task.projectId = this.currentProject.id;
              this.task.pubId = this.information.id;
              this.$message({
                message: '分配成功',
                type: 'success'
              })
              this.$refs["taskForm"].clearValidate(['startTime']);
              console.log(this.task);
            }
          })
        }  else {
          this.$message.error('分配失败');
        }
      });
    },
    completeAssign(){
      // this.dialogFormVisible = false;
      // 分配完成；添加check表，表示部长已经查看：
      instanceToken.get("project/minister/acceptProject?projectId="+this.nowHandleProjectId).then(res=>{

      })

    },
  }
}
</script>

<style scoped>

</style>